<template>
  <div class="content-wrapp">
    <el-form ref="formData" :model="formData" size="small" label-width="60px">
      <el-form-item prop="name" label="姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item prop="channel" label="渠道">
        <el-input v-model="formData.channel"></el-input>
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="primary" @click="getData" icon="el-icon-search">搜索</el-button>
        <el-button @click="resetForm('formData')" icon="el-icon-circle-close">清空</el-button>
        <el-button
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="$refs.talentModal.add()"
        >新增</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="table" :data="tableData" :header-cell-style="getRowClass" v-loading="loading">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="channel" label="渠道"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="applyPosition" label="应聘岗位"></el-table-column>
      <el-table-column prop="degree" label="学历"></el-table-column>
      <el-table-column prop="politicCountenance" label="政治面貌"></el-table-column>
      <el-table-column prop="graduateSchool" label="毕业院校"></el-table-column>
      <el-table-column prop="major" label="专业"></el-table-column>
      <el-table-column prop="categoryId" label="人才分类">
        <template slot-scope="scope">{{scope.row.categoryId | category}}</template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="Download(scope.row.curriculumVitae)">下载</el-button>
          <el-button type="success" size="mini" @click="$refs.talentModal.edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="Delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <talent-modal ref="talentModal" @load="getData"></talent-modal>
    <scrollTable ref="scrollTable"></scrollTable>
  </div>
</template>
<script>
import { talentList, remove } from "@/api/talentPool";
import talentModal from "./talentModal";
import scrollTable from "components/scroll/scroll-table.vue";
export default {
  components: {
    talentModal,
    scrollTable
  },
  data() {
    return {
      formData: {
        currentPage: 1,
        name: "",
        pageSize: 20,
        channel: ""
      },
      tableData: [],
      loading: false
    };
  },
  filters: {
    category(id) {
      switch (id) {
        case 1:
          return "初级职位";
          break;
        case 2:
          return "中级职位";
          break;
        default:
          return "高级职位";
          break;
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      talentList(this.formData).then(res => {
        this.tableData = res.data.data;
        this.loading = false;
        this.$refs.scrollTable.scrollShow(this.$refs.table);
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    Delete(id) {
      this.$confirm("此操作删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove({ id: id }).then(res => {
            if (res.data.code === this.ERR_OK) {
              this.$message.success(res.data.msg);
              this.getData();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    Download(url) {
      window.open(url);
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5 ";
      } else {
        return "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  display: inline-block;
}
</style>